<template>
  <div class="about">
    <div>User----{{ $route.params.id }}</div>
  </div>
</template>

<script>
export default {
  name: "UserView",
  data() {
    return {};
  },
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
      console.log("watch--------to:" + to.fullPath + "from:" + from.fullPath);
    },
  },
  beforeRouteEnter(to, from, next) {
    //beforeRouterEnter 是支持给next传递回调的唯一守卫
    console.log("beforeRouteEnter----------", this, "out");
    next((vm) => {
      console.log(vm, "vm");
    });
    // next(false);
    // next(new Error());
  },
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
    console.log(
      "beforeRouteUpdate------to:" + to.fullPath + "from:" + from.fullPath
    );
    next();
  },
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm(
      "Do you really want to leave? you have unsaved changes!"
    );
    console.log("beforeRouteLeave----------");
    answer ? next() : next(false);
  },
  activated() {
    console.log("activated-----");
  },
  deactivated() {
    console.log("deactivated-----");
  },
  methods: {},
};
</script>
